<script setup lang="ts">

import { ref } from 'vue';

const activeTab = ref('ipc');

const openTab = (tabName: string) => {
    activeTab.value = tabName;
};

</script>

<template>
    <!-- 工控机中心 -->
    <h1 class="title"><span>工控机</span>中心</h1>
    <h2 class="small-title">IPC PRODUCT</h2>
    <div class="container2">
        <div class="tabs">
            <button :class="{ 'tab-link': true, active: activeTab === 'ipc' }" @click="openTab('ipc')">工控机</button>
            <button :class="{ 'tab-link': true, active: activeTab === 'embedded' }"
                @click="openTab('embedded')">嵌入式工控机</button>
            <button :class="{ 'tab-link': true, active: activeTab === 'all-in-one' }"
                @click="openTab('all-in-one')">工业一体机</button>
            <button :class="{ 'tab-link': true, active: activeTab === 'display' }"
                @click="openTab('display')">工业显示器</button>
        </div>
        <div :id="'ipc'" :class="{ 'tab-content': true, active: activeTab === 'ipc' }" v-if="activeTab === 'ipc'">
            <div class="content-wrapper">
                <img src="../img/10005.jpg" alt="IPC-618-H110">
                <div class="con">
                    <h2>IPC-618-H110</h2>
                    <p>途控IPC-618-H110是一款全模具生产的4U高度、19英寸标准机架式工控机，4*DIMM内存插槽，支持双通道DDR4 2133/2400/2666MHz，整板最大支持64GB。
                    </p>
                    <a href="#" class="view-more">查看详情 +</a>
                </div>
            </div>
            <div class="content-wrapper2">
                <div>
                    <div class="image-container">
                        <img src="../img/10006.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10007.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10008.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10009.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
            </div>
        </div>
        <div :id="'embedded'" :class="{ 'tab-content': true, active: activeTab === 'embedded' }">
            <!-- 嵌入式工控机的内容 -->
            <div class="content-wrapper">
                <img src="../img/10005.jpg" alt="IPC-618-H110">
                <div class="con">
                    <h2>BPC-J1900</h2>
                    <p>产品特性:<br>·: intel celeron j1900<br>·: 1*ddr3 1333mhz, up to 8g<br>·: 1*msata,1*sata2.0<br>·:watchdog功能,支持1~255秒系统重启
                    </p>
                    <a href="#" class="view-more">查看详情 +</a>
                </div>
            </div>
            <div class="content-wrapper2">
                <div>
                    <div class="image-container">
                        <img src="../img/10006.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10007.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10008.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10009.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
            </div>
        </div>
        <div :id="'all-in-one'" :class="{ 'tab-content': true, active: activeTab === 'all-in-one' }">
            <!-- 工业一体机的内容 -->
            <div class="content-wrapper">
                <img src="../img/10005.jpg" alt="IPC-618-H110">
                <div class="con">
                    <h2>IPC-618-H110</h2>
                    <p>途控IPC-618-H110是一款全模具生产的4U高度、19英寸标准机架式工控机，4*DIMM内存插槽，支持双通道DDR4 2133/2400/2666MHz，整板最大支持64GB。
                    </p>
                    <a href="#" class="view-more">查看详情 +</a>
                </div>
            </div>
            <div class="content-wrapper2">
                <div>
                    <div class="image-container">
                        <img src="../img/10006.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10007.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10008.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10009.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
            </div>
        </div>
        <div :id="'display'" :class="{ 'tab-content': true, active: activeTab === 'display' }">
            <!-- 工业显示器的内容 -->
            <div class="content-wrapper">
                <img src="../img/10005.jpg" alt="IPC-618-H110">
                <div class="con">
                    <h2>IPC-618-H110</h2>
                    <p>途控IPC-618-H110是一款全模具生产的4U高度、19英寸标准机架式工控机，4*DIMM内存插槽，支持双通道DDR4 2133/2400/2666MHz，整板最大支持64GB。
                    </p>
                    <a href="#" class="view-more">查看详情 +</a>
                </div>
            </div>
            <div class="content-wrapper2">
                <div>
                    <div class="image-container">
                        <img src="../img/10006.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10007.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10008.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
                <div>
                    <div class="image-container">
                        <img src="../img/10009.jpg" alt="">
                        <div class="blue-overlay"></div>
                    </div>
                    <p>IPC-618-Q670E</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@import '../css/containeripc.css';
</style>
